// pages/list/list.js
Page({
  // 1.要在list获取到我们index的九宫格对应的一个id值，使用发送求获取list数据
  // 2. 要在list这个页面获取index的九宫格的标题

  //补充跳转到detail页面的需求；
  //1.把view标签改成navigator
  //2.点击第一个列表，把当前的数据存储到本地
  //跳转到详情页面的思路
  //1.改装view为navigator
  //2.先给navigator标签的自定义属性存储每一项的数据，再给navigator注册一个点击事件，获取自定义属性的的值
  //3.把获取的信息存储到storage里面
  /**
   * 页面的初始数据
   */
  data: {
    // 列表数据
    list: [],
    // 定义一个存储id的变量
    id: "",
    // 分页请求的页数
    page: 1,
    // 每一页的显示条数
    limit: 8,
    // 定义一个标识
    flag: true
  },
  //获取详情数据的函数
  handleGetDetail(e) {
    //console.log(e)
    //把获取的信息存储到storage里面
    var data = e.currentTarget.dataset.listdetail
    wx.setStorage({
      key: 'listDetail',
      data,
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    // options里面存储着页面跳转过来时，所携带的信息
    console.log(options);
    //把options的id写入data的id里面
    this.setData({
      id: options.id
    })
    // 动态设置当前页面的标题
    wx.setNavigationBarTitle({
        title: options.title
      }),
      // $.ajax({ url:'', type:"get"})
      // 发送请求，获取数据
      // 模板字符串``  在里面如果有变量，就使用${}包裹
      wx.request({
        url: `https://locally.uieee.com/categories/${this.data.id[0]}/shops`,
        method: "get",
        // 传递给后台的数据
        data: {
          _page: this.data.page,
          _limit: this.data.limit
        },
        success: (res) => {
          // 使用箭头函数，为了把这个函数里面的this指向外层
          console.log(res.data)
          // 把数据写入data里面的list
          this.setData({
            list: res.data
          })
        }
      })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

    // 1. 每次上拉的时候，发送请求获取数据
    // 2. 拿到的数据，先把list从data里面获取，然后追加到list的后面，最后再把追加完的list写入data
    // 3. 每一次往上拉的时候，this.data.page 就要+1，加完之后继续写回data（这个需求要在请求之前处理）
    //  4. 当上拉加载值，返回的res.data的长度如果小于 每页显示的条数this.data.limit,则证明数据已经加载完毕

    // 定义一个标识,如果在这里定义的话，每一次上滑就会重新执行onREachBottom事件，flag就重新设置为true，这个flag需要定义在data里面
    // var flag = true;
    // console.log(this.data.flag)
    if (!this.data.flag) {
      // 当flag为false的时候，证明已经没有数据了
      wx.showToast({
        title: '亲，所有数据已加载完毕~',
        icon: "none",
        duration2000
      })
      return;
    }
    if (this.data.flag) {

      var page = this.data.page;
      page++;
      this.setData({
        page
      })
      // 发送请求，获取数据
      // 模板字符串``  在里面如果有变量，就使用${}包裹
      wx.request({
        url: `https://locally.uieee.com/categories/${this.data.id}/shops`,
        method: "get",
        // 传递给后台的数据
        data: {
          _page: this.data.page,
          _limit: this.data.limit
        },
        success: (res) => {
          console.log(res.data)
          //  2. 拿到的数据，先把list从data里面获取，然后追加到list的后面，最后再把追加完的list写入data
          var list = this.data.list;
          // es6的语法： 推荐使用
          var list = [...this.data.list, ...res.data]
          // for(var i=0; i<res.data.length; i++){
          //   list.push(res.data[i])
          // }
          // 把数据写入data里面的list
          this.setData({
            list
          })
          // console.log(this.data.list)
          // console.log(res.data.length, this.data.limit)
          if (res.data.length < this.data.limit) {
            this.setData({
              flag: false
            })
          }
        }
      })
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})